import React, { useState } from 'react'

// 1. 函数组件在更新时, 整个函数都会重新执行
// 2. useState 在后续渲染更新时, 只会取我们之前的状态(数据其实是定义在外层), 不会创建一个新的状态

export default function App() {
  // const count = ref(0)
  // useState 为函数组件添加状态
  // 参数: 状态的初始值
  // 返回值: 是个数组, 第0项是状态, 用于渲染页面; 第1项是修改状态的方法
  const [count, setCount] = useState(0)
  const [msg, setMsg] = useState('hello hooks')
  // 错误写法: 将useState放入嵌套 循环 条件等代码块中, 印象后面渲染按照顺序读取之前的状态
  // if (false) {
  //   const [msg, setMsg] = serState('hello react')
  // }
  let [money, setMoney] = useState(10000)
  const [userObj, setuserObj] = useState({
    name: 'daj',
    age: 23,
  })

  const clickHandler = () => {
    setCount(count + 1)
  }

  const addAge = () => {
    // userObj.age++

    const newUserObj = {
      ...userObj,
      age: userObj.age + 1,
    }

    setuserObj(newUserObj)
  }

  return (
    <div>
      <h1>计数器 {count}</h1>
      <button onClick={clickHandler}>+1</button>
      <hr />

      <p>{msg}</p>
      <button onClick={() => setMsg('hello function commponent')}>改msg</button>
      <hr />

      <p>剩余金额{money}</p>
      <button
        onClick={() => {
          setMoney(money - 100)
        }}
      >
        花钱-100
      </button>
      <hr />

      <p>
        {userObj.name} - {userObj.age}
      </p>
      <button onClick={addAge}>下一年</button>
    </div>
  )
}
